<template>
  <div class="order-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>
        定单列表
      </template>
    </nav-bar>

    <van-tabs ref="tabs" @click="onChangeTab" class="order-tab">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
      <van-tab title="发货"></van-tab>
      <van-tab title="交易完成"></van-tab>
      <van-tab title="过期"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" @offset="10">
          <div @click="goTo(item.id)" class="order-item-box" v-for="(item, index) in list" :key="index">
            <div class="order-item-header">
              <span style="line-height:30px;">订单号：{{item.order_no}} <br> 创建时间：{{item.created_at}}</span>
            </div>
            <van-card v-for="sub in item.orderDetails.data" :key="sub.id" :num="sub.num" :price="sub.goods.price"
              desc="全场包邮" :title="sub.goods.title" :thumb="sub.goods.cover_url" />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import {
    reactive,
    ref,
    toRefs,
    onMounted
  } from 'vue';
  import NavBar from "components/common/navbar/NavBar";
  import {
    getOrderList
  } from 'network/order'
  import {
    useRouter,
    useRoute
  } from 'vue-router';


  export default {
    name: 'Order',
    components: {
      NavBar
    },
    setup() {
      /*
      List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
      此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
       */

      const router = useRouter()
      const route = useRoute()
      let tabs = ref(null);
      const state = reactive({
        loading: false,
        finished: false,
        refreshing: false,
        list: [],
        page: 1,
        totalPage: 0,
        status: 0,
      })

      onMounted(() => {
        onRefresh(); // 初使化
      })


      const loadData = () => {
        getOrderList({
          page: state.page,
          status: state.status,
          include: 'orderDetails.goods'
        }).then(res => {
          state.list = state.list.concat(res.data);
          state.loading = false;

          console.log(state.page + "################");

          state.totalPage = res.meta.pagination.total_pages;

          if (state.page >= state.totalPage) {
            state.finished = true;
          }
        })
      }


      const onLoad = () => {

        if (!state.refreshing && state.page < state.totalPage) {
          state.page = state.page + 1;
        }


        if (state.refreshing) {
          state.list = [];
          state.refreshing = false;
        }

        loadData();
      }

      const onRefresh = () => {
        // 是否处于加载状态，加载过程中不触发load事件
        state.refreshing = true
        // 清空列表数据
        state.finished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        state.loading = true

        state.page = 1;

        onLoad()
      }

      // tab 切换
      const onChangeTab = (name) => {
        state.status = name;
        onRefresh();
      }

      // 到订单详情页
      const goTo = (id) => {
        router.push({
          path: '/orderdetail',
          query: {
            id
          }
        });
      }

      return {
        ...toRefs(state),
        onLoad,
        onRefresh,
        tabs,
        onChangeTab,
        goTo
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-box {
    text-align: left;

    .order-header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      width: 100%;
      height: 44px;
      line-height: 44px;
      padding: 0 10px;
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;

      .order-name {
        font-size: 14px;
      }
    }

    .order-tab {
      margin-top: 44px;
      position: fixed;
      left: 0;
      z-index: 1000;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
    }


    .content {
      height: 100vh;
      overflow: hidden;
      overflow-y: scroll;
      padding-top: 100px;

    }

    .order-list-refresh {
      .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .van-pull-refresh__head {
        background: #f9f9f9;
      }

      .order-item-box {
        margin: 20px 10px;
        background-color: #FAFAFA;

        .order-item-header {
          padding: 10px 20px 0 20px;
          display: flex;
          justify-content: space-between;
        }

        .van-card {
          background-color: #FFFFFF;
          border-radius: 3px;
          margin-top: 10px;
        }
      }
    }
  }
</style>